<template>
  <transition-group
    enter-active-class="animate__backInUp"
    leave-active-class="animate__heartBeat"
    tag="div"
    class="app"
    :duration="200"
  >
    <Home class="animate__animated" v-if="isHome" @change="change" ref="home" key="home"></Home>
    <Compare
      class="animate__animated"
      v-else
      @change="change"
      :selectedList="$refs.home.selectedList"
      :baseUrl="$refs.home.baseUrl"
      key="compare"
    ></Compare>
  </transition-group>
</template>

<script>
import Home from './components/home/indexHome.vue' // 引入主页
import Compare from './components/compare/indexCompare.vue' // 引入比较页面

export default {
  // 注册组件
  components: {
    Home,
    Compare
  },
  // 数据变量
  data () {
    return {
      isHome: true // 是否显示主页
    }
  },
  methods: {
    change (bol) {
      if (bol) {
        setTimeout(() => {
          this.isHome = bol
        }, 500)
      } else {
        this.isHome = bol
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  width: 100vw;
  height: 100vh;
  background: #292b2f;
  font-size: 0.2rem;
  overflow: hidden;
}
</style>
